import React, { Component } from "react";
import ThisDemo from "./this_demo";
import ControllerForm from "./pages/ControllerForm";
import PropsChildren from "./pages/PropsChildren";
import withHoc from "./pages/withHoc";

class Hello extends Component {
    render() {
        return (<div className="hello_com">hello</div>)
    }
}

class World extends Component {
    render() {
        return (<h2>world!</h2>)
    }
}

const MouserMove = (props) => {
    return (
        <>
            <h2>x坐标为：{props.x}</h2>
            <h2>y坐标为：{props.y}</h2>
        </>
    )
}

const HocMouse = withHoc(MouserMove)

class App extends Component {
    state = { id: '01', name: 'jack', age: 20 }
    render() {
        console.log(this.props);
        return (
            <>
                <h1>my name is {this.state.name},my age is {this.state.age}</h1>
                <h2>{this.props.title}</h2>
                <Hello />
                <World />

                <hr></hr>
                <ThisDemo></ThisDemo>
                <hr />
                <ControllerForm></ControllerForm>

                <hr />
                <PropsChildren>{
                    (mouse) => {
                        return <h3>当前坐标x:{mouse.x},当前y坐标为{mouse.y}</h3>
                    }
                }</PropsChildren>

                <hr />
                <HocMouse></HocMouse>
            </>
        )
    }
}

export default App